<template>
  <el-col :class="{'sidebar-menu':true,'layout-hide-text': spanLeft < 252 }" :style="{width:spanLeft+'px'}">
    <div class="sidebar-logo"><img src="../assets/logo.png" alt=""><span>万颗APP后台管理系统</span></div>
    <el-menu class="el-menu-vertical-demo" @select="select" @open="handleOpen" @close="handleClose"
             theme="dark" :router=true :unique-opened=true>
      <template v-for="(item,index) in menuData">
        <template v-if="item.children.length>0">
          <el-submenu :key="index" :index="index.toString()">
            <template slot="title">
              <i :class="item.sysMenu.icon"></i></i><span>{{item.sysMenu.menuName}}</span>
            </template>
            <el-menu-item :index="subItem.sysMenu.url" key="index" :route="{name:subItem.sysMenu.url}"
                          v-for="(subItem,subIndex) in item.children">{{subItem.sysMenu.menuName}}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="index" :route="{name:'Home'}" :class="{ 'is-active':routerName==='Home'}">
            <i class="el-icon-menu"></i><span>{{item.sysMenu.menuName}}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </el-col>
</template>
<script>
  import * as types from '../store/mutations-type'
  import axios from 'axios'
  import api from '../store/api'
  export default {
    name: 'sidebar',
    data () {
      return {
        routerName: '',
        menuData: ''
      }
    },
    props: ['spanLeft'],
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      select (name) {
        this.routerName = name
        this.transform()
      },
      transform () {
        switch (this.routerName) {
          case 'Home':
            this.$store.dispatch(types.CUT_MODULE, 'home')
            break
          case 'RollList':
            this.$store.dispatch(types.CUT_MODULE, 'roll')
            break
          case 'BrandList':
            this.$store.dispatch(types.CUT_MODULE, 'brand')
            break
          case 'CategoryList':
            this.$store.dispatch(types.CUT_MODULE, 'category')
            break
          case 'SorterList':
            this.$store.dispatch(types.CUT_MODULE, 'sorter')
            break
        }
      },
      getMenu () {
        axios.get(api.platformMenus)
          .then(response => {
            const result = response.data
            if (result.success) {
              this.menuData = result.data
            } else {
              this.$message.error({
                title: '错误',
                message: result.message
              })
            }
          })
      }
    },
    mounted () {
      this.getMenu()
      this.routerName = this.$router.currentRoute.name
      this.transform()
    }
  }
</script>
<style scoped>
  .sidebar-menu {
    z-index: 2;
    position: relative;
    background-color: #324157;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
    -moz-transition: width .3s;
    -webkit-transition: width .3s;
    transition: width .3s;
    min-width: 60px;
  }

  .sidebar-logo {
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.075);
    color: white;
    padding-left: 18px;
    line-height: 60px;
  }

  .sidebar-logo img {
    width: 36px;
    margin-top: 10px;
    position: absolute;
    -webkit-transition: margin-left 0.3s;
    -moz-transition: margin-left 0.3s;
    -ms-transition: margin-left 0.3s;
    -o-transition: margin-left 0.3s;
    transition: margin-left 0.3s;
    -moz-transition: margin-left .3s;
    -webkit-transition: margin-left .3s;
    transition: margin-left .3s;
  }

  .sidebar-menu li i {
    -webkit-transition: font-size 0.3s;
    -moz-transition: font-size 0.3s;
    -ms-transition: font-size 0.3s;
    -o-transition: font-size 0.3s;
    transition: font-size 0.3s;
    -moz-transition: font-size .3s;
    -webkit-transition: font-size .3s;
    transition: font-size .3s;
  }

  .sidebar-menu li span, .sidebar-logo span {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -moz-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    margin-left: 5px;
  }

  .layout-hide-text li i {
    font-size: 20px;
  }

  .layout-hide-text li span {
    opacity: 0;
  }

  .layout-hide-text .sidebar-logo img {
    margin-left: -5px;
  }

  .layout-hide-text .sidebar-logo span {
    opacity: 0;
  }

  .sidebar-logo span {
    padding-left: 48px;
  }
</style>
